<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016-03-27
  Time: 13:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/WEB-INF/view/common/jsp_top.jsp" %>
<script type="text/javascript">
   /* var _menus = {
        "menus": [
            {
                "menuid": "1", "icon": "icon-sys", "menuname": "控件使用",
                "menus": [
                    {"menuid": "13", "menuname": "用户管理", "icon": "icon-users", "url": "demo/2"},
                    {"menuid": "14", "menuname": "角色管理", "icon": "icon-role", "url": "demo/3"},
                    {"menuid": "15", "menuname": "权限设置", "icon": "icon-set", "url": "demo/4"},
                    {"menuid": "16", "menuname": "系统日志", "icon": "icon-log", "url": "demo1.html"}
                ]
            }, {
                "menuid": "8", "icon": "icon-sys", "menuname": "员工管理",
                "menus": [{"menuid": "21", "menuname": "员工列表", "icon": "icon-nav", "url": "demo.html"},
                    {"menuid": "22", "menuname": "视频监控", "icon": "icon-nav", "url": "demo1.html"}
                ]
            }, {
                "menuid": "56", "icon": "icon-sys", "menuname": "部门管理",
                "menus": [{"menuid": "31", "menuname": "添加部门", "icon": "icon-nav", "url": "demo1.html"},
                    {"menuid": "32", "menuname": "部门列表", "icon": "icon-nav", "url": "demo2.html"}
                ]
            }, {
                "menuid": "28", "icon": "icon-sys", "menuname": "财务管理",
                "menus": [{"menuid": "41", "menuname": "收支分类", "icon": "icon-nav", "url": "demo.html"},
                    {"menuid": "42", "menuname": "报表统计", "icon": "icon-nav", "url": "demo1.html"},
                    {"menuid": "43", "menuname": "添加支出", "icon": "icon-nav", "url": "demo2.html"}
                ]
            }, {
                "menuid": "39", "icon": "icon-sys", "menuname": "商城管理",
                "menus": [{"menuid": "51", "menuname": "商品分类", "icon": "icon-nav", "url": "demo.html"},
                    {"menuid": "52", "menuname": "商品列表", "icon": "icon-nav", "url": "demo1.html"},
                    {"menuid": "53", "menuname": "商品订单", "icon": "icon-nav", "url": "demo2.html"}
                ]
            }
        ]
    };*/

    var _menus ;

    j(document).ready(function () {
        loadFirstMenu();
        InitLeftMenu();
        tabClose();
        tabCloseEven();

        j('#tabs').tabs({
            onSelect: function (title) {
                var currTab = j('#tabs').tabs('getTab', title);
                var iframe = j(currTab.panel('options').content);

                var src = iframe.attr('src');
                if (src)
                    j('#tabs').tabs('update', {tab: currTab, options: {content: createFrame(src)}});

            }
        });

    })

    //加载一级菜单
    function loadFirstMenu() {
        j.ajax({
            url : 'menu/load',
            type : 'GET',
            async : false,//同步
            success : function(data) {
                if (!data) {//如果没有一级菜单，则退出。
                    data = [];
                }
                _menus = {"children":data};
            },
            error : function(XMLHttpRequest, textStatus, errorThrown) {
                console.log(textStatus);
            }
        });
    }

    //初始化左侧
    function InitLeftMenu() {
        j("#nav").accordion({animate: true});

        j.each(_menus.children, function (i, n) {
            var menuList = '';
            menuList += '<ul>';
            if(n.children != undefined){
                j.each(n.children, function (j, o) {
                    menuList += '<li><div style="margin:0 auto;"><a ref="' + o.id + '" href="javascript:void(0)" rel="' + o.path + '" ><div style="display:inline-block;width:16px;text-align: center" ><img width="16px" height="16px" src="statics/images/sys_icon/Arrow Left.png"></div><span style="margin-left: 5px;margin-bottom: 2px;" class="nav">' + o.name + '</span></a></div></li> ';
//                    menuList += '<li><div><a ref="' + o.id + '" href="javascript:void(0)" rel="' + o.path + '" ><span class="icon ' + o.icon + '" >&nbsp;</span><span class="nav">' + o.name + '</span></a></div></li> ';
                })
            }
            menuList += '</ul>';

            j('#nav').accordion('add', {
                title: n.name,
                content: menuList,
                iconCls: 'icon ' + n.icon
            });

        });

        j('#nav ul li a').click(function () {
            var tabTitle = j(this).children('.nav').text();

            var url = j(this).attr("rel");
            var menuid = j(this).attr("ref");
            var icon = getIcon(menuid);
            addTab(tabTitle, url, icon);
            j('.easyui-accordion li div').removeClass("selected");
            j(this).parent().addClass("selected");
        }).hover(function () {
            j(this).parent().addClass("hover");
        }, function () {
            j(this).parent().removeClass("hover");
        });

        //选中第一个
        var panels = j('#nav').accordion('panels');
        if(panels[0] != undefined){
            var t = panels[0].panel('options').title;
            j('#nav').accordion('select', t);
        }
    }
    //获取左侧导航的图标
    function getIcon(menuid) {
        var icon = 'icon ';
        j.each(_menus.children, function (i, n) {
            if(n.children){
                j.each(n.children, function (j, o) {
                    if (o.id == menuid) {
                        icon += o.icon;
                    }
                })
            }
        })

        return icon;
    }

    function addTab(subtitle, url, icon) {
        if (!j('#tabs').tabs('exists', subtitle)) {
            j('#tabs').tabs('add', {
                title: subtitle,
                content: createFrame(url),
                closable: true,
                icon: icon
            });
        } else {
            j('#tabs').tabs('select', subtitle);
            j('#mm-tabupdate').click();
        }
        tabClose();
    }

    function createFrame(url) {
        var s = '<iframe scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';
        return s;
    }

    function tabClose() {
        /*双击关闭TAB选项卡*/
        j(".tabs-inner").dblclick(function () {
            var subtitle = j(this).children(".tabs-closable").text();
            j('#tabs').tabs('close', subtitle);
        })
        /*为选项卡绑定右键*/
        j(".tabs-inner").bind('contextmenu', function (e) {
            j('#mm').menu('show', {
                left: e.pageX,
                top: e.pageY
            });

            var subtitle = j(this).children(".tabs-closable").text();

            j('#mm').data("currtab", subtitle);
            j('#tabs').tabs('select', subtitle);
            return false;
        });
    }
    //绑定右键菜单事件
    function tabCloseEven() {
        //刷新
        j('#mm-tabupdate').click(function () {
            var currTab = j('#tabs').tabs('getSelected');
            var url = j(currTab.panel('options').content).attr('src');
            j('#tabs').tabs('update', {
                tab: currTab,
                options: {
                    content: createFrame(url)
                }
            })
        })
        //关闭当前
        j('#mm-tabclose').click(function () {
            var currtab_title = j('#mm').data("currtab");
            j('#tabs').tabs('close', currtab_title);
        })
        //全部关闭
        j('#mm-tabcloseall').click(function () {
            j('.tabs-inner span').each(function (i, n) {
                var t = j(n).text();
                j('#tabs').tabs('close', t);
            });
        });
        //关闭除当前之外的TAB
        j('#mm-tabcloseother').click(function () {
            j('#mm-tabcloseright').click();
            j('#mm-tabcloseleft').click();
        });
        //关闭当前右侧的TAB
        j('#mm-tabcloseright').click(function () {
            var nextall = j('.tabs-selected').nextAll();
            if (nextall.length == 0) {
                //msgShow('系统提示','后边没有啦~~','error');
                alert('后边没有啦~~');
                return false;
            }
            nextall.each(function (i, n) {
                var t = j('a:eq(0) span', j(n)).text();
                j('#tabs').tabs('close', t);
            });
            return false;
        });
        //关闭当前左侧的TAB
        j('#mm-tabcloseleft').click(function () {
            var prevall = j('.tabs-selected').prevAll();
            if (prevall.length == 0) {
                alert('到头了，前边没有啦~~');
                return false;
            }
            prevall.each(function (i, n) {
                var t = j('a:eq(0) span', j(n)).text();
                j('#tabs').tabs('close', t);
            });
            return false;
        });

        //退出
        j("#mm-exit").click(function () {
            j('#mm').menu('hide');
        })
    }

    //弹出信息窗口 title:标题 msgString:提示信息 msgType:信息类型 [error,info,question,warning]
    function msgShow(title, msgString, msgType) {
        j.messager.alert(title, msgString, msgType);
    }



</script>

<div region="north" split="true" border="false" style="overflow: hidden; height: 30px; background:  #7f99be repeat-x center 50%;
        line-height: 20px;color: #fff; ">
    <span style="float:right; padding-right:20px;" class="head">欢迎 修补大师 <a href="#" id="editpass">修改密码</a>
        <a href="#" id="loginOut">安全退出</a>
    </span>
    <span style="padding-left:10px; font-size: 16px; ">
        <img src="statics/images/common/blocks.gif" width="20"  height="20" align="absmiddle"/>
        梦想修补师的后台管理系统
    </span>
</div>
<div region="south" split="true" style="height: 30px; background: #D2E0F2; ">
    <div class="footer">By 梦想修补师(QQ:573330500)</div>
</div>
<div region="west" hide="true" split="true" title="导航菜单" style="width:180px;" id="west">
    <div id="nav" class="easyui-accordion" fit="true" border="false">
        <!--  导航内容 -->

    </div>

</div>
<div id="mainPanle" region="center" style="background: #eee; overflow-y:hidden">
    <div id="tabs" class="easyui-tabs" fit="true" border="false">
        <div title="欢迎使用" style="padding:20px;overflow:hidden; color:red; ">
            welcome!!!
        </div>
    </div>
</div>

<div id="mm" class="easyui-menu" style="width:150px;">
    <div id="mm-tabupdate">刷新1</div>
    <div class="menu-sep"></div>
    <div id="mm-tabclose">关闭</div>
    <div id="mm-tabcloseall">全部关闭</div>
    <div id="mm-tabcloseother">除此之外全部关闭</div>
    <div class="menu-sep"></div>
    <div id="mm-tabcloseright">当前页右侧全部关闭</div>
    <div id="mm-tabcloseleft">当前页左侧全部关闭</div>
    <div class="menu-sep"></div>
    <div id="mm-exit">退出</div>
</div>
<%@include file="/WEB-INF/view/common/jsp_bottom.jsp" %>
